<?php  if ( ! defined('BASEPATH')) exit('No direct script access allowed');?>

<style type="text/css">
/* table sorter */
table.tablesorter {
	width: 100%;
	text-align: left;
}
table.tablesorter thead tr th, table.tablesorter tfoot tr th {
	background-color: #e6EEEE;
}
table.tablesorter thead tr .tblsort-header {
	cursor: pointer;
	background: url(/images/tablesorter/bg.gif) no-repeat right center;
}
table.tablesorter tbody td {
	color: #3D3D3D;
	background-color: #FFF;
	vertical-align: top;
}
table.tablesorter tbody tr.odd td {
	background-color:#F0F0F6;
}
table.tablesorter thead tr .headerSortUp {
	background: url(/images/tablesorter/asc.gif) no-repeat right center;
}
table.tablesorter thead tr .headerSortDown {
	background: url(/images/tablesorter/desc.gif) no-repeat right center;
}
table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp {
background-color: #8dbdd8;
}
/* end table sorter */
</style>
<div class="middle padtop10 myclear">
	<div class="page-content">
		<h3>
			<a style="color: #ff6600;" href="<?php echo site_url('publicreport'); ?>">
				Report
			</a>
			>>
			<a style="color: #ff6600;" href="<?php echo site_url('publicreport/boxmc'); ?>">
				Box muachung report
			</a>
			>>
			Box Muachung detail
		</h3>
		<hr class="martop10 marbottom10 myclear" />
		<br />
		<table cellpadding="0" cellspacing="0" border="0" class="">
			<tr>
				<td class="ver-middle padbottom10 padright10">
					<b>Theo ngày</b>
				</td>
				<td class="ver-middle padbottom10">
					<input type="text" value="<?php echo $fromdate . ' :: ' . $todate; ?>" id="date" name="date" class="input-time" style="width: 200px;"/>
				</td>
				
				<td class="ver-middle padbottom10 padleft10">
					<input type="button" value="      View      " onclick="viewBoxMcReport('<?php echo $strCrc; ?>');" />
				</td>
			</tr>
		</table>
		<br />
			
		<input type="button" value="Export to .CVS" onclick="boxmc_detail_export_2csv();" />
		&nbsp;&nbsp;
		<div style="width: 980px; overflow: auto;">
			<table id="tableData" class="martop10 tbl-list tablesorter" cellpadding="0" cellspacing="0" border="0">
				<thead>
					<tr>
						<th class="td-label tblsort-header text-center" width="80" style="background-image: none;">
							<b>Date</b>
						</th>
						
						<th class="td-label tblsort-header"  style="background-image: none;">
							<b>Domain</b>
						</th>
												
						<th class="td-label tblsort-header text-center" width="120" style="background-image: none;">
							<b>Total Click</b>
						</th>
						
						<th class="td-label tblsort-header text-center" width="120" style="background-image: none;">
							<b>Real Click</b>
						</th>
												
						<th class="td-label tblsort-header text-center" width="120" style="background-image: none;">
							<b>Total View</b>
						</th>
						
						<th class="td-label tblsort-header text-center" width="60" style="background-image: none;">
							<b>CTR (%)</b>
						</th>
					</tr>
				</thead>
				<tbody>
					<?php
					$index = 1;
					foreach($lstData as $key=>$item)
					{
						$numItem = count($item);
						$bgcolor = (($index % 2) == 0) ? "" : 'class="odd"';
						?>
						<tr>
							<td class="pad5 text-center ver-middle bold" rowspan="<?php echo $numItem + 1 ?>">
								<?php echo $key; ?>
							</td>
						</tr>
						<?php
						foreach($item as $domainItem)
						{
						?>
							<tr <?php echo $bgcolor; ?> >
								<td class="pad5">
									<?php echo $domainItem['domaingroup']; ?>
								</td>
								<td class="pad5 text-right ">
									<?php echo (is_numeric($domainItem['totalclick'])) ? number_format($domainItem['totalclick']) : $domainItem['totalclick']; ?>
								</td>
								<td class="pad5 text-right ">
									<?php echo (is_numeric($domainItem['realclick'])) ? number_format($domainItem['realclick']) : $domainItem['realclick']; ?>
								</td>
								<td class="pad5 text-right ">
									<?php echo (is_numeric($domainItem['totalview'])) ? number_format($domainItem['totalview']) : $domainItem['totalview']; ?>
								</td>
								<td class="pad5 text-right ">
									<?php echo $domainItem['ctr']; ?>
								</td>
							</tr>
						<?php
						}
						$index++;
					}
					?>
				</tbody>
				<tfoot>
					<tr style="background: #ccc;">
						<td colspan="2" class="pad5 bold">
							Tổng
						</td>
						<td class="pad5 text-right bold">
							<?php echo number_format($arrTotal['totalclick']); ?>
						</td>
						<td class="pad5 text-right bold">
							<?php echo number_format($arrTotal['realclick']); ?>
						</td>
						<td class="pad5 text-right bold">
							<?php echo number_format($arrTotal['totalview']); ?>
						</td>
						<td class="pad5 text-right bold">
							<?php echo $arrTotal['ctr']; ?>
						</td>
					</tr>
				</tfoot>
			</table>
		</div>
		
		<br /><br />
		
		<div id="total_click_chart" class="chart"></div>
		<br />
		<div id="total_real_click_chart" class="chart"></div>
		<br />
		<div id="total_view_chart" class="chart"></div>
		<br />
		<div id="ctr_chart" class="chart"></div>
		<br />
		<br />
	</div>
	
</div>
<form id="frmExpCvs" action="<?php echo site_url('report/boxmc_detail?exp=cvs&fdate=' . $fromdate . '&tdate=' . $todate . '&crc=' . $strCrc) ?>" method="post" style="display: none;">
	<textarea id="txtexp" name="txtexp" ></textarea>
</form>
<script type="text/javascript" src="<?php echo STATIC_DOMAIN;?>js/highcharts/js/highcharts.src.js"></script>
<script type="text/javascript" src="<?php echo STATIC_DOMAIN;?>js/highcharts/js/modules/exporting.src.js"></script>
<script type="text/javascript" src="<?php echo STATIC_DOMAIN;?>js/highcharts/js/themes/grid.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('input#date').DatePicker({
			format: 'd-m-Y',
			date: ['<?php echo $fromdate;?>','<?php echo $todate;?>'],
        	current: '<?php echo date('d-m-Y');?>',
			position: 'right',
			calendars: 2,
        	mode: 'range',
			onChange: function(formated, dates) 
			{
				$('#date').val(formated.join(' :: '));
				$('#date').DatePickerHide();				
			}
		});
	});
	
	function viewBoxMcReport(strcrc)
	{
		var arrTime = $('#date').val().split('::');
 		var fromdate = $.trim(arrTime[0]);
        var todate = $.trim(arrTime[1]);        
		window.location = '/report/boxmc_detail?fdate=' + fromdate + '&tdate=' + todate + '&crc=' + strcrc;
	}
	
	function boxmc_detail_export_2csv()
	{
		var arrTr = $('#tableData tbody tr');
		var num = arrTr.length;
		
		var listDate = new Object();
		var index = 0;
		if(num > 0)
		{
			var dt = '';
			for(var i = 0; i < num; i++)
			{
				var tmp = new Object();
				var arrTd = $(arrTr[i]).find('td');
				if(arrTd.length == 1)
				{
					dt = $.trim($(arrTd[0]).html());
				}
				else
				{
					tmp['dt'] = dt;
					tmp['domain'] = $.trim($(arrTd[0]).html());
					tmp['tc'] = $.trim($(arrTd[1]).html());
					tmp['rc'] = $.trim($(arrTd[2]).html());
					tmp['v'] = $.trim($(arrTd[3]).html());
					tmp['ctr'] = $.trim($(arrTd[4]).html());
					
					arrTd = null;
					listDate[index] = tmp;
					tmp = null;
					index++;
					dt = '';
					
				}
			}
			
			var arrTrTotal = $('#tableData tfoot tr');
			if(arrTrTotal.length > 0)
			{
				var tmp = new Object();
				var arrTd = $(arrTrTotal[0]).find('td');
				tmp['dt'] = $.trim($(arrTd[0]).html());
				tmp['domain'] = '';
				tmp['tc'] = $.trim($(arrTd[1]).html());
				tmp['rc'] = $.trim($(arrTd[2]).html());
				tmp['v'] = $.trim($(arrTd[3]).html());
				tmp['ctr'] = $.trim($(arrTd[4]).html());
				listDate[index] = tmp;
				tmp = null;
			}
			$('#txtexp').val(JSON.stringify(listDate));
			listDate = null;
			$('#frmExpCvs').submit();
		}
		else
		{
			alert('Không có dữ liệu để export');
			return;
		}
	}
	
	Highcharts.theme = {
	   colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
	   chart: {
		  backgroundColor: {
			 linearGradient: [0, 0, 500, 500],
			 stops: [
				[0, 'rgb(239, 239, 239)']
			 ]
		  },
		  plotBackgroundColor: 'rgba(255, 255, 255, .9)',
		  plotBorderWidth: 1,
		  spacingRight: 30
	   },
	   title: {
		  style: { 
			 color: '#000',
			 font: 'bold 16px "Trebuchet MS", Verdana, sans-serif'
		  }
	   },
	   subtitle: {
		  style: { 
			 color: '#666666',
			 font: 'bold 12px "Trebuchet MS", Verdana, sans-serif'
		  }
	   },
	   xAxis: {
		  
		  labels: {					 
			 style: {
				color: '#000',
				font: '11px Trebuchet MS, Verdana, sans-serif'
			 }
		  },
		  tickColor: '#333',
		  title: {
			 style: {
				color: '#333',
				fontWeight: 'bold',
				fontSize: '12px',
				fontFamily: 'Trebuchet MS, Verdana, sans-serif'
	
			 }            
		  }
	   },
	   yAxis: {
		  //minorTickInterval: 'auto',
		  lineColor: '#aaa',
		  lineWidth: 1,
		  tickWidth: 1,
		  tickColor: '#999',
		  labels: {
			 style: {
				color: '#000',
				font: '11px Trebuchet MS, Verdana, sans-serif'
			 }
		  },
		  title: {
			 style: {
				color: '#333',
				fontWeight: 'bold',
				fontSize: '12px',
				fontFamily: 'Trebuchet MS, Verdana, sans-serif'
			 }            
		  }
		   
	   },
	   legend: {
		  itemStyle: {         
			 font: '9pt Trebuchet MS, Verdana, sans-serif',
			 color: 'black'
	
		  },
		  itemHoverStyle: {
			 color: '#039'
		  },
		  itemHiddenStyle: {
			 color: 'gray'
		  }
	   },
	   labels: {
		  style: {
			 color: '#99b'
		  }
	   }
	};
	var highchartsOptions = Highcharts.setOptions(Highcharts.theme);
	var chart;
	var chart2;
	var chart3;
	var chart4;
	$(document).ready(function() {
		chart = new Highcharts.Chart({
			chart: {
				renderTo: 'total_click_chart',
				defaultSeriesType: 'areaspline',
                marginBottom: 60,
				zoomType: 'x'
			},
			title: {
				text: 'Total click',
				style: {
						font: 'normal 18px arial, sans-serif',
						color:'#0a708c'
				}
			},
			 xAxis: {
				categories: <?php echo json_encode($arrDate);?>,
				maxZoom: 5,
                labels: {
                  //  step:  <?php  echo isset($chartStep) ? $chartStep : 1;?>,
					rotation: 0,
					align: 'center'
                },
				tickPixelInterval:0,
				tickmarkPlacement: 'on',
				tickInterval: <?php  echo isset($chartStep) ? $chartStep : 1;?>,
				lineColor: '#333',
				lineWidth: 1
				
			},
			yAxis: {
				title: {
					text: '',
					style: {
						font: 'bold 14px vernada, sans-serif',
						color:'#0a708c'
					}
				}
			},
			tooltip: {
				formatter: function() {
						var a=function addCommas(nStr)
							{
								nStr += '';
								x = nStr.split('.');
								x1 = x[0];
								x2 = x.length > 1 ? '.' + x[1] : '';
								var rgx = /(\d+)(\d{3})/;
								while (rgx.test(x1)) {
									x1 = x1.replace(rgx, '$1' + ',' + '$2');
								}
								return x1 + x2;
							}
		                return ''+ this.x +': <b>'+ a(this.y) +'</b>';
				},
				style: {
					font: 'normal 12px vernada, sans-serif',
					color:'#000000'
				},
				
                crosshairs: true
			},
			credits: {
				enabled: false
			},
			plotOptions: {
				areaspline: {
					fillOpacity: 0.2,
					lineWidth: 2,
					states: {
					   hover: {
						  lineWidth: 3
					   }
					},
					marker: {
					   enabled: true,
					   states: {
						  hover: {
							 enabled: true,
							 symbol: 'circle',
							 radius: 4,
							 lineWidth: 1
						  },
						  radius: 4
					   }   
					}
				 }
				
				
			},
			rangeSelector: {
				selected: 1,
				inputEnabled: false
			},
			
			navigator: {
				height: 30
			},
            legend: {
				align: 'center',
				verticalAlign: 'bottom',
				y: 8,
				x:10,
				floating: false,
				borderWidth: 1,
				///backgroundColor: '#FFFFFF',
				backgroundColor: Highcharts.theme.legendBackgroundColor || '#FFFFFF'
				
			},
			series: [<?php $numChartitem = count($tcChart); for($i =0; $i < $numChartitem; $i++){echo $tcChart[$i]; echo ($i <($numChartitem-1))? ',':'';}?>],
            exporting: {
                enabled: false
            }
			
		});
		
		chart2 = new Highcharts.Chart({
			chart: {
				renderTo: 'total_real_click_chart',
				defaultSeriesType: 'areaspline',
                marginBottom: 60,
				zoomType: 'x'
			},
			title: {
				text: 'Total real click',
				style: {
						font: 'normal 18px arial, sans-serif',
						color:'#0a708c'
				}
			},
			 xAxis: {
				categories: <?php echo json_encode($arrDate);?>,
				maxZoom: 5,
                labels: {
                  //  step:  <?php  echo isset($chartStep) ? $chartStep : 1;?>,
					rotation: 0,
					align: 'center'
                },
				tickPixelInterval:0,
				tickmarkPlacement: 'on',
				tickInterval: <?php  echo isset($chartStep) ? $chartStep : 1;?>,
				lineColor: '#333',
				lineWidth: 1
				
			},
			yAxis: {
				title: {
					text: '',
					style: {
						font: 'bold 14px vernada, sans-serif',
						color:'#0a708c'
					}
				}
			},
			tooltip: {
				formatter: function() {
						var a=function addCommas(nStr)
							{
								nStr += '';
								x = nStr.split('.');
								x1 = x[0];
								x2 = x.length > 1 ? '.' + x[1] : '';
								var rgx = /(\d+)(\d{3})/;
								while (rgx.test(x1)) {
									x1 = x1.replace(rgx, '$1' + ',' + '$2');
								}
								return x1 + x2;
							}
		                return ''+ this.x +': <b>'+ a(this.y) +'</b>';
				},
				style: {
					font: 'normal 12px vernada, sans-serif',
					color:'#000000'
				},
				
                crosshairs: true
			},
			credits: {
				enabled: false
			},
			plotOptions: {
				areaspline: {
					fillOpacity: 0.2,
					lineWidth: 2,
					states: {
					   hover: {
						  lineWidth: 3
					   }
					},
					marker: {
					   enabled: true,
					   states: {
						  hover: {
							 enabled: true,
							 symbol: 'circle',
							 radius: 4,
							 lineWidth: 1
						  },
						  radius: 4
					   }   
					}
				 }
				
				
			},
			rangeSelector: {
				selected: 1,
				inputEnabled: false
			},
			
			navigator: {
				height: 30
			},
            legend: {
				align: 'center',
				verticalAlign: 'bottom',
				y: 8,
				x:10,
				floating: false,
				borderWidth: 1,
				///backgroundColor: '#FFFFFF',
				backgroundColor: Highcharts.theme.legendBackgroundColor || '#FFFFFF'
				
			},
			series: [<?php $numChartitem = count($rcChart); for($i =0; $i < $numChartitem; $i++){echo $rcChart[$i]; echo ($i <($numChartitem-1))? ',':'';}?>],
            exporting: {
                enabled: false
            }
			
		});
		
		chart3 = new Highcharts.Chart({
			chart: {
				renderTo: 'total_view_chart',
				defaultSeriesType: 'areaspline',
                marginBottom: 60,
				zoomType: 'x'
			},
			title: {
				text: 'Total view',
				style: {
						font: 'normal 18px arial, sans-serif',
						color:'#0a708c'
				}
			},
			 xAxis: {
				categories: <?php echo json_encode($arrDate);?>,
				maxZoom: 5,
                labels: {
                  //  step:  <?php  echo isset($chartStep) ? $chartStep : 1;?>,
					rotation: 0,
					align: 'center'
                },
				tickPixelInterval:0,
				tickmarkPlacement: 'on',
				tickInterval: <?php  echo isset($chartStep) ? $chartStep : 1;?>,
				lineColor: '#333',
				lineWidth: 1
				
			},
			yAxis: {
				title: {
					text: '',
					style: {
						font: 'bold 14px vernada, sans-serif',
						color:'#0a708c'
					}
				}
			},
			tooltip: {
				formatter: function() {
						var a=function addCommas(nStr)
							{
								nStr += '';
								x = nStr.split('.');
								x1 = x[0];
								x2 = x.length > 1 ? '.' + x[1] : '';
								var rgx = /(\d+)(\d{3})/;
								while (rgx.test(x1)) {
									x1 = x1.replace(rgx, '$1' + ',' + '$2');
								}
								return x1 + x2;
							}
		                return ''+ this.x +': <b>'+ a(this.y) +'</b>';
				},
				style: {
					font: 'normal 12px vernada, sans-serif',
					color:'#000000'
				},
				
                crosshairs: true
			},
			credits: {
				enabled: false
			},
			plotOptions: {
				areaspline: {
					fillOpacity: 0.2,
					lineWidth: 2,
					states: {
					   hover: {
						  lineWidth: 3
					   }
					},
					marker: {
					   enabled: true,
					   states: {
						  hover: {
							 enabled: true,
							 symbol: 'circle',
							 radius: 4,
							 lineWidth: 1
						  },
						  radius: 4
					   }   
					}
				 }
			},
			rangeSelector: {
				selected: 1,
				inputEnabled: false
			},
			
			navigator: {
				height: 30
			},
            legend: {
				align: 'center',
				verticalAlign: 'bottom',
				y: 8,
				x:10,
				floating: false,
				borderWidth: 1,
				///backgroundColor: '#FFFFFF',
				backgroundColor: Highcharts.theme.legendBackgroundColor || '#FFFFFF'
				
			},
			series: [<?php $numChartitem = count($tvChart); for($i =0; $i < $numChartitem; $i++){echo $tvChart[$i]; echo ($i <($numChartitem-1))? ',':'';}?>],
            exporting: {
                enabled: false
            }
			
		});
		
		chart4 = new Highcharts.Chart({
			chart: {
				renderTo: 'ctr_chart',
				defaultSeriesType: 'areaspline',
                marginBottom: 60,
				zoomType: 'x'
			},
			title: {
				text: 'Total CTR(%)',
				style: {
						font: 'normal 18px arial, sans-serif',
						color:'#0a708c'
				}
			},
			 xAxis: {
				categories: <?php echo json_encode($arrDate);?>,
				maxZoom: 5,
                labels: {
                  //  step:  <?php  echo isset($chartStep) ? $chartStep : 1;?>,
					rotation: 0,
					align: 'center'
                },
				tickPixelInterval:0,
				tickmarkPlacement: 'on',
				tickInterval: <?php  echo isset($chartStep) ? $chartStep : 1;?>,
				lineColor: '#333',
				lineWidth: 1
				
			},
			yAxis: {
				title: {
					text: '',
					style: {
						font: 'bold 14px vernada, sans-serif',
						color:'#0a708c'
					}
				}
			},
			tooltip: {
				formatter: function() {
						var a=function addCommas(nStr)
							{
								nStr += '';
								x = nStr.split('.');
								x1 = x[0];
								x2 = x.length > 1 ? '.' + x[1] : '';
								var rgx = /(\d+)(\d{3})/;
								while (rgx.test(x1)) {
									x1 = x1.replace(rgx, '$1' + ',' + '$2');
								}
								return x1 + x2;
							}
		                return ''+ this.x +': <b>'+ a(this.y) +'</b>';
				},
				style: {
					font: 'normal 12px vernada, sans-serif',
					color:'#000000'
				},
				
                crosshairs: true
			},
			credits: {
				enabled: false
			},
			plotOptions: {
				areaspline: {
					fillOpacity: 0.2,
					lineWidth: 2,
					states: {
					   hover: {
						  lineWidth: 3
					   }
					},
					marker: {
					   enabled: true,
					   states: {
						  hover: {
							 enabled: true,
							 symbol: 'circle',
							 radius: 4,
							 lineWidth: 1
						  },
						  radius: 4
					   }   
					}
				 }
				
				
			},
			rangeSelector: {
				selected: 1,
				inputEnabled: false
			},
			
			navigator: {
				height: 30
			},
            legend: {
				align: 'center',
				verticalAlign: 'bottom',
				y: 8,
				x:10,
				floating: false,
				borderWidth: 1,
				///backgroundColor: '#FFFFFF',
				backgroundColor: Highcharts.theme.legendBackgroundColor || '#FFFFFF'
				
			},
			series: [<?php $numChartitem = count($ctrChart); for($i =0; $i < $numChartitem; $i++){echo $ctrChart[$i]; echo ($i <($numChartitem-1))? ',':'';}?>],
            exporting: {
                enabled: false
            }
		});
	});
</script>